<template>
  <div class="content">
    <div class="showContent">
      <div class="show-GitHub">
        <a class="icon-github icon-5x" href=""></a>
      </div>
      <div class="show-resume" @click="fileClick">
        <a class="icon-file-alt icon-5x" href=""></a>
        <p>生成简历</p>
      </div>
      <div class="show-downLoad" @click="handleDownLoad">
        <a class="icon-download-alt icon-5x"></a>
      </div>
      <transition name="fade">
        <div class="downLoad-choice" v-show="isChoice">
          <div class="choice-up">
            <div class="up-left">
              <span>96像素/英寸</span>
              <span>A4 794x1123</span>
              <input
                type="radio"
                @click="choiceClick({ width: 794, height: 1123 })"
              />
            </div>
            <div class="up-right">
              <span>120像素/英寸</span>
              <span>A4 1487x2105</span>
              <input
                type="radio"
                @click="choiceClick({ width: 1487, height: 2105 })"
              />
            </div>
          </div>
          <div class="choice-down">
            <div class="down-left">
              <span>width:</span>
              <input placeholder="px" />
            </div>
            <div class="down-right">
              <span>height:</span>
              <input placeholder="px" />
            </div>
          </div>
          <button>down</button>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChoice: "",
    };
  },
  created() {},
  methods: {
    fileClick() {
      this.$emit("listenShowMenu", { type: "fileClick", showFlag: true });
    },
    handleDownLoad() {
      this.isChoice = !this.isChoice;
    },
    choiceClick(size) {
      if (size.width && size.height) {
        this.$emit("listenShowMenu", { type: "choiceClick", size: size });
      }
    },
  },
};
</script>

<style lang="less">
* {
  margin: 0;
  padding: 0;
}
.content {
  float: left;
  width: 8%;
  height: 100%;
  background: #ffffff;
  text-align: center;
  .showContent {
    position: relative;
    width: 90%;
    height: 99%;
    margin: 0 auto;
    padding-top: 1rem;
    box-sizing: border-box;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    a {
      color: pink;
      font-size: 6rem;
    }
    p {
      color: pink;
      font-size: 1.8rem;
    }
    .show-GitHub {
      margin-bottom: 2rem;
    }
    .show-resume {
      p {
        font-weight: 800;
      }
    }
    .show-downLoad {
      position: absolute;
      bottom: 2rem;
      width: 100%;
    }
    .downLoad-choice {
      color: pink;
      position: absolute;
      width: 25rem;
      bottom: 2rem;
      left: 110%;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      background: #ffffff;
      z-index: 999;
      span {
        display: block;
      }
      input {
        outline: none;
      }
      .choice-up {
        display: flex;
        justify-content: center;
        .up-left,
        .up-right {
          margin: 1rem;
        }
      }
      .choice-down {
        display: flex;
        justify-content: center;
        span {
          display: inline;
        }
        input {
          width: 3rem;
          margin: 0 0.5rem;
          border: 1px solid transparent;
        }
      }
      button {
        width: 4rem;
        height: 2rem;
        color: pink;
        border-radius: 15%;
        margin: 1rem;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        background-color: #ffffff;
        border: 1px solid pink;
      }
    }
  }
}
</style>